<template>
   <view class="mons">
		
		<view class="list">
			<view @click="link" class="li">
				<view class="lef">
					<image style="width:51rpx;margin-right: 16rpx;" src="../../static/img/3/3-100.png" mode="widthFix"></image>
					<view class="text">
						在线客服
						<view>
							查看与客服的沟通记录
						</view>
					</view>
				</view>
				<view class="rig">
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
				<view class="both"></view>
			</view>
			<navigator url="/pages/user/msghd" class="li">
				<view class="lef">
					<image style="width:46rpx;margin-right: 19rpx;" src="../../static/img/3/3-101.png" mode="widthFix"></image>
					<view class="text">
						账户消息
						<view v-if='account.bulletins.length != 0'>
							{{account.bulletins[0].cTitle}}
						</view>
					</view>
				</view>
				<view class="rig">
					<text v-if="cAccount>0">{{cAccount}}</text>
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
				<view class="both"></view>
			</navigator>
			<!-- ss -->
			<navigator url="/pages/user/msgfw" class="li">
				<view class="lef">
					<image style="width:46rpx;margin-right: 19rpx;" src="../../static/img/3/3-102.png" mode="widthFix"></image>
					<view class="text">
						订单消息
						<view v-if='order.bulletins.length != 0'>
							{{order.bulletins[0].cTitle}}
						</view>
						
					</view>
				</view>
				<view class="rig">
					<text v-if="cOrder>0">{{cOrder}}</text>
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
				<view class="both"></view>
			</navigator>
			<navigator url="/pages/user/msgxt" class="li">
				<view class="lef">
					<image style="width:45rpx;margin-right: 19rpx;" src="../../static/img/3/3-103.png" mode="widthFix"></image>
					<view class="text">
						系统消息
						<view v-if='system.bulletins.length != 0'>
							{{system.bulletins[0].cTitle}}
						</view>
					</view>
				</view>
				<view class="rig">
					<text v-if="cSystem>0">{{cSystem}}</text>
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
				<view class="both"></view>
			</navigator>
		</view>
   </view>
</template>

<script>
    export default {
        name: "",
        components:{
            
        },
        data(){
            return {
                order:[],
				account:[],
				system:[],
				cOrder:0,
				cAccount:0,
				cSystem:0
            }
        },
		onLoad() {
			var that = this;
			that.$Request.post(
				that.$api.httpApi.user.getDifBulletins+'?token='+that.$SysCache.get('token')+'&message_type=order&bReaded=false',
				).then(res=>{
					if(res.code == 200){
						that.order=res.data
						let cOrder = 0
						res.data.bulletins.forEach(item=>{
							if(!item.bReaded){
								cOrder++
							}
						})
						that.cOrder = cOrder
					}
				});	
				that.$Request.post(
					that.$api.httpApi.user.getDifBulletins+'?token='+that.$SysCache.get('token')+'&message_type=account&bReaded=false',
					).then(res=>{
						if(res.code == 200){
							that.account=res.data
							let cAccount = 0
							res.data.bulletins.forEach(item=>{
								if(!item.bReaded){
									cAccount++
								}
							})
							that.cAccount = cAccount
						}
					});	
					that.$Request.post(
					that.$api.httpApi.user.getDifBulletins+'?token='+that.$SysCache.get('token')+'&message_type=system&bReaded=false',
					).then(res=>{
						if(res.code == 200){
							that.system=res.data
							let cSystem = 0
							res.data.bulletins.forEach(item=>{
								if(!item.bReaded){
									cSystem++
								}
							})
							that.cSystem = cSystem
						}
					});	
		},
		methods:{
			link(){
				var url = 'https://yongyou-c7ca5f-8498.udesk.cn/im_client/?web_plugin_id=125391'
				uni.navigateTo({
					url:`/pages/user/customerService?url=${url}`
				})
				// window.open('https://yongyou-c7ca5f-8498.udesk.cn/im_client/?web_plugin_id=125391')
			}
		}

    }
</script>

<style scoped>
	.list .li{
		margin-bottom: 1px;
		background: #fff;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 30rpx;
		padding-top: 30rpx;
		font-size:26rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(102,102,102,1);
	}
	.list .li .lef{
		width: 55%;
		float: left;
	}
	.list .li .lef image{
		display: inline-block;
		vertical-align: middle;
	}
	.list .li .lef .text{
		display: inline-block;
		vertical-align: middle;
		font-size:28rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(68,68,68,1);
	}
	.list .li .lef .text view{
		font-size: 26rpx;
		color: #999999;
		margin-top: 12rpx;
	}
	.list .li .rig{
		display: inline-block;
		float: right;
	}
	.list .li .rig image{
		display: inline-block;
		width: 16rpx;
		vertical-align: middle;
		margin-left: 19rpx;
		margin-top: 22rpx;
	}
		.list .li .rig text{
			display: inline-block;
			vertical-align: middle;
			width:32rpx;
			height:32rpx;
			background:rgba(240,64,111,1);
			border-radius:50%;
			font-size:26rpx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(255,255,255,1);
			line-height:32rpx;
			text-align: center;
		margin-top: 22rpx;
		}
	uni-page-body{
		height: 100%;
	}
	.mons{
		min-height: 100%;
		background: #EEEEEE;
	}
	.both{
		display: block;
		clear: both;
	}
</style>
